<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{$view_env_name}{$config.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="/static/common/ico/default.ico" />
    <link rel="stylesheet" href="__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/style/admin.css" media="all">
    {$js_code|raw}
    <style>
        .layui-layout .first-nav {
            width: 110px;
            box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.1);
            z-index: 1003;
        }
        .layui-layout .layui-side,
        .layui-layout .first-nav  .layui-logo {
            background-color: #fff !important;
        }

        .layui-layout .second-nav {
            width: 120px;
            overflow: hidden;
            box-sizing: border-box;
            left: 110px;
            top: 90px;
        }

        .layui-layout-admin .layui-logo {
            width: 110px;
            height: 50px;
        }

        .layui-layout-admin .layui-layout-left,
        .layui-layout-body .layadmin-pagetabs {
            left: 110px;
        }

        .layui-layout-body .layui-body {
            left: 230px;
            top: 90px;
        }

        .first-nav .layui-nav {
            width: 110px;
        }

        .second-nav .layui-nav {
            width: 120px;
        }

        .layui-side-menu .layui-nav .layui-nav-item a {
            color: #666;
            padding-left: 40px;
            padding-right: 20px;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        .layui-side-menu .layui-nav .layui-nav-item.layui-this >a,
        .layui-nav .layui-nav-itemed .layui-nav-child .layui-this a {
            color: #3A91FB;
            /*color: #666;*/
        }

        .layui-side-menu .layui-nav .layui-nav-item.layui-this a,
        .layui-nav .layui-nav-itemed .layui-nav-child .layui-this a {
            background-color: #fff !important;
        }

        .layui-side-menu .layui-nav .layui-nav-item.layui-this,
        .layui-nav .layui-nav-itemed .layui-nav-child .layui-this {
            background-color: #fff !important;
        }

        .layui-side-menu .layui-nav .layui-nav-item .layui-icon {
            left: 16px;
        }

        .second-nav .layui-nav .layui-nav-item a {
            padding: 0 20px;
        }
        .second-nav .layui-nav .layui-nav-item dd a  {
            padding: 0 20px 0 30px;
        }
        .layui-side-menu .layui-nav-tree .layui-nav-bar {
            display: none;
        }

        .layui-nav-itemed>a {
            color: #666 !important;
        }

        .layui-side-menu .layui-nav-tree .layui-nav-item .layui-icon.second-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            font-size: 15px;
            width: 15px;
            height: 15px;
            left: auto;
        }
        .layui-side-menu .layui-nav-tree .layui-nav-item .layui-icon.second-icon.up {
            transform: rotateZ(180deg);
            margin-top: 5px;
        }

        .layui-side-menu .layui-nav-tree .layui-nav-item .layui-nav-more.down {
            border-color: transparent transparent #666;
        }

        .layui-nav .layui-nav-itemed>.layui-nav-child {
            background-color: #fff !important;
        }

        .layui-side .second-title {
            color: #333;
            position: absolute;
            line-height: 48px;
            padding-left: 20px;
            font-weight: bold;
            width: 120px;
            border-bottom: 1px solid #E5E5E5;
            box-sizing: border-box;
        }

        .layui-layout-body .layui-body.hide-second-nav {
            left: 110px;
        }

        .layui-side.layui-side-menu .activate a {
            color: #3A91FB;
        }

        @media screen and (max-width: 992px) {
            .layui-layout-admin .layui-side {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body class="layui-layout-body">
<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                <!--                    <li class="layui-nav-item layui-hide-xs" lay-unselect>-->
                <!--                        <a href="javascript:" layadmin-event="theme">-->
                <!--                            <i class="layui-icon layui-icon-theme"></i>-->
                <!--                        </a>-->
                <!--                    </li>-->
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:" layadmin-event="note">
                        <i class="layui-icon layui-icon-note"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:" layadmin-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:">
                        <cite>{$admin_name}（{$role_name}）</cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-href="{:url('my/password')}">修改密码</a></dd>
                        <hr>
                        <dd style="text-align: center;"><a href="{:url('account/logout')}">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
                    <a href="javascript:" layadmin-event="more">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 侧边菜单 (一级)-->
        <div class="layui-side layui-side-menu first-nav">
            <div class="layui-side-scroll">
                <div class="layui-logo">
                    <img style="height:20px;width: 77px" src="{$config.backstage_logo}">
                </div>
                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
                    {volist name="menu" id="vo"}
                    <li data-id="{$vo.id}" class="layui-nav-item">
                        <a href="javascript:" lay-tips="{$vo.name}">
                            <i class="layui-icon {$vo.icon}"></i>
                            <cite>{$vo.name}</cite>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>
        <!-- 子级菜单 -->
        <script id="subMenu" type="text/html">
            {{#  if(d) { }}
            <div class="layui-side layui-side-menu second-nav ">
                <div class="layui-side-scroll">
                    <div class="second-title">
                        <div>{{d.name}}</div>
                    </div>
                    <ul class="layui-nav layui-nav-tree">
                        {{#  layui.each(d.sub, function(index, item){ }}
                        {{#  if(item.sub.length <= 0) { }}
                        <li  class="layui-nav-item  {{#  if(index == 0) { }}layui-this{{# } }}">
                            <a href="javascript:" lay-href='{{item.uri}}' lay-tips="{{ item.name }}">
                                <cite>{{ item.name }}</cite>
                            </a>
                        </li>
                        {{# } else { }}
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:" lay-tips="{{ item.name }}">
                                <cite>{{ item.name }}</cite>
                                <i class="layui-icon second-icon layui-icon-triangle-d"></i>
                            </a>
                            <dl class="layui-nav-child">
                                {{#  layui.each(item.sub, function(i, itemSub){ }}
                                <dd class="{{#  if(index == 0 && i==0) { }}layui-this{{# } }}">
                                    <a href="javascript:" lay-href="{{itemSub.uri}}">{{itemSub.name}}</a>
                                </dd>
                                {{#  }); }}
                            </dl>
                        </li>
                        {{# } }}
                        {{#  }); }}
                    </ul>
                </div>
            </div>
            {{#  } }}
        </script>
        <div id="view"></div>
    </div>

    <!-- 页面标签 -->
    <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
            <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;"></a>
                    <dl class="layui-nav-child layui-anim-fadein">
                        <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                        <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                        <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
            <ul class="layui-tab-title" id="LAY_app_tabsheader">
                <li lay-id="" lay-attr="{:url('index/stat')}" class="layui-this">工作台</li>
            </ul>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="layui-body hide-second-nav" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
            <iframe src="{:url('index/stat')}" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
    </div>

    <!-- 辅助元素 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
</div>

<script src="__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        version:"{$front_version}",
        base: '__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'laytpl'], function () {
        var element = layui.element;
        var $ = layui.$;
        var laytpl = layui.laytpl;
        element.init();
        element.render('nav');
        $('#think_page_trace_open').remove();

        // 展示二级菜单 fzr
        localStorage.setItem("menus", '{$menu|json_encode|raw}');
        $('.layui-nav-tree .layui-nav-item').click(function () {
            // 一级菜单的样式切换
            $(this).siblings().removeClass('activate');
            $(this).addClass('activate');
            // 获取一级菜单ID, 找出二级三级菜单那数据
            var id = parseInt($(this).attr('data-id'));
            var menus = JSON.parse('{$menu|json_encode|raw}');
            var data = [];
            menus.forEach(function (item) {
                if (id === item['id']) {
                    data = item;
                }
            });
            // 是否存在二级菜单,不存在则隐藏
            if (data) {
                $("#LAY_app_body").removeClass('hide-second-nav');
            } else {
                $("#LAY_app_body").addClass('hide-second-nav');
            }
            // 使用模板引擎, 渲染二三级菜单
            var getTpl =  document.getElementById('subMenu').innerHTML;
            var view = document.getElementById('view');
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });

            // 触发点击事件
            $('.second-nav .layui-this a').trigger("click");

            // 二级菜单切换
            $(".second-nav .layui-nav-tree .layui-nav-item").click(function () {
                if (!$(this).hasClass("layui-nav-itemed")) {
                    $(".second-nav .layui-nav .layui-nav-itemed  dl dd").removeClass('layui-this');
                    $(this).siblings().removeClass('layui-this');
                    $(this).addClass('layui-this');
                }
            });

            // 三级菜单样式切换
            $(".second-nav .layui-nav-tree .layui-nav-itemed dd").click(function () {
                $(".second-nav .layui-nav .layui-nav-item").removeClass('layui-this');
                $(".second-nav .layui-nav .layui-nav-item dl dd").removeClass('layui-this');
                $(this).siblings().removeClass('layui-this');
                $(this).addClass('layui-this');
            });

        });

    });
</script>
</body>

</html>